<template>
  <div class="player-statistics-page">
    <el-card class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h2>选手统计</h2>
          <p>选手数据统计和分析</p>
        </div>
      </div>
    </el-card>

    <el-row :gutter="20" class="stats-cards">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#409eff">
                <User />
              </el-icon>
            </div>
            <div class="stat-info">
              <h3>总选手数</h3>
              <p class="stat-number">89</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#67c23a">
                <TrendCharts />
              </el-icon>
            </div>
            <div class="stat-info">
              <h3>活跃选手</h3>
              <p class="stat-number">67</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-icon">
              <el-icon size="40" color="#e6a23c">
                <Trophy />
              </el-icon>
            </div>
            <div class="stat-info">
              <h3>专业选手</h3>
              <p class="stat-number">12</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#f56c6c">
                <Calendar />
              </el-icon>
            </div>
            <div class="stat-info">
              <h3>本月新增</h3>
              <p class="stat-number">8</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="charts-section">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>等级分布</span>
          </template>
          <div class="chart-placeholder">
            <el-icon size="60" color="#ddd">
              <PieChart />
            </el-icon>
            <p>图表组件开发中...</p>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>年龄分布</span>
          </template>
          <div class="chart-placeholder">
            <el-icon size="60" color="#ddd">
              <BarChart />
            </el-icon>
            <p>图表组件开发中...</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="table-card">
      <template #header>
        <span>选手统计表</span>
      </template>
      <vxe-table :data="playerStats" border stripe>
        <vxe-column type="seq" width="60" title="序号"></vxe-column>
        <vxe-column field="name" title="选手姓名" width="120"></vxe-column>
        <vxe-column field="level" title="等级" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getLevelType(row.level)">
              {{ getLevelText(row.level) }}
            </el-tag>
          </template>
        </vxe-column>
        <vxe-column field="total_matches" title="总比赛数" width="100" align="center"></vxe-column>
        <vxe-column field="wins" title="胜利场次" width="100" align="center"></vxe-column>
        <vxe-column field="win_rate" title="胜率" width="100" align="center">
          <template #default="{ row }">
            <span :style="{ color: getWinRateColor(row.win_rate) }">
              {{ row.win_rate }}%
            </span>
          </template>
        </vxe-column>
        <vxe-column field="points" title="积分" width="100" align="center"></vxe-column>
        <vxe-column field="join_date" title="加入时间" width="120"></vxe-column>
      </vxe-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 选手统计数据
const playerStats = ref([
  {
    id: 1,
    name: '张三',
    level: 'professional',
    total_matches: 24,
    wins: 20,
    win_rate: 83,
    points: 1850,
    join_date: '2024-01-15'
  },
  {
    id: 2,
    name: '李四',
    level: 'advanced',
    total_matches: 22,
    wins: 18,
    win_rate: 82,
    points: 1720,
    join_date: '2024-02-20'
  },
  {
    id: 3,
    name: '王五',
    level: 'advanced',
    total_matches: 20,
    wins: 15,
    win_rate: 75,
    points: 1650,
    join_date: '2024-01-10'
  },
  {
    id: 4,
    name: '赵六',
    level: 'intermediate',
    total_matches: 18,
    wins: 12,
    win_rate: 67,
    points: 1420,
    join_date: '2024-03-05'
  }
])

const getLevelType = (level: string) => {
  const levelMap: Record<string, string> = {
    beginner: 'info',
    intermediate: 'warning',
    advanced: 'success',
    professional: 'danger'
  }
  return levelMap[level] || 'info'
}

const getLevelText = (level: string) => {
  const levelMap: Record<string, string> = {
    beginner: '初级',
    intermediate: '中级',
    advanced: '高级',
    professional: '专业'
  }
  return levelMap[level] || '未知'
}

const getWinRateColor = (rate: number) => {
  if (rate >= 80) return '#67c23a'
  if (rate >= 60) return '#e6a23c'
  return '#f56c6c'
}
</script>

<style scoped>
.player-statistics-page {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 20px;
}

.title-section p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.stats-cards {
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  margin-right: 20px;
}

.stat-info h3 {
  margin: 0 0 10px 0;
  color: #606266;
  font-size: 14px;
  font-weight: normal;
}

.stat-number {
  margin: 0;
  color: #303133;
  font-size: 28px;
  font-weight: bold;
}

.charts-section {
  margin-bottom: 20px;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}

.chart-placeholder p {
  margin: 10px 0 0 0;
  font-size: 14px;
}

.table-card {
  min-height: 400px;
}
</style>
